<template>
  <div>
    <!--好友动态列表元素-->
    <hr/>
    <div id="box">
      <div id="imgBox" @click="hitsClick">
        <img :src="friendUpdate.img" width="200" height="111">
      </div>
      <SXQUserItem :user="{avatar: friendUpdate.avatar, nickname: friendUpdate.nickname, id: friendUpdate.userId}"/>
      <div id="rightBox">
        <div id="title" @click="hitsClick">{{ friendUpdate.title }}</div>
        <div id="content">{{ friendUpdate.content.substring(0, 20) }}</div>
        <div id="bottomBox">
          <SXQIconAndNum :icon="item" :num="friendUpdate.nums[index]" :id="friendUpdate.id"
                         v-for="(item, index) in icons" :callback="callback"/>
        </div>
      </div>
      <div id="publishDate">
        发布日期: {{ friendUpdate.createTime }}
      </div>
    </div>

  </div>
</template>

<script>
import SXQIconAndNum from "@/components/SXQ-IconAndNum";
import SXQUserItem from "@/components/SXQ-UserItem";
import {setState} from "@/api/api";

export default {
  name: "SXQ-FriendUpdateItem",
  components: {SXQUserItem, SXQIconAndNum},
  // id用于判断这是某个动态的状态
  props: ['friendUpdate', 'callback'],
  data() {
    return {
      icons: ['eyes.png', 'thumbsUp0.png', 'comment.png', 'collect0.png', 'share.png']
    }
  },
  methods: {
    hitsClick() {
      setState({
        friendUpdatesId: this.friendUpdate.id,
        hitsState: true,
        collectState: null,
        likeState: null
      }).then(res => {
        if (res.body.code == 1) {
          // 刷新数据
          this.callback()
        } else {
          this.$Message.error("服务器崩溃")
        }
      })

      // 跳转到详情页
      this.$router.push({
        path: "/FriendUpdateInfo",
        query: {friendUpdateId: this.friendUpdate.id}
      }, () => {}, () => {})
    },
    clickUser() {
      // 跳转到用户详情页
      this.$router.push({
        path: "/UserInfoPage",
        query: {
          userId: this.friendUpdate.userId
        }
      }, () => {
      }, () => {
      })
    }
  }
}
</script>

<style scoped>
#publishDate {
  color: #999;
}

#bottomBox {
  position: absolute;
  bottom: 0;
  margin-left: 20px;
  /*border: 1px solid black;*/
}

#box {
  padding-left: 10px;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 800px;
  /*border: 1px solid black;*/
}

#rightBox {
  vertical-align: top;
  margin-left: 10px;
  height: fit-content;
  /*border: 1px solid black;*/
  display: inline-block;
}

#title {
  cursor: pointer;
  /*border: 1px solid black;*/
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

#title:hover {
  text-decoration: underline;
}

#content {
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: #999;
}

#imgBox {
  cursor: pointer;
  display: inline-block;
  width: fit-content;
  /*border: black 1px solid;*/
}

#imgBox > img {
  border-radius: 10px 0 0 10px;
}
</style>